<template>
  <div>
    <div class="login">
      <div class="login-nav">
        <div class="login-nav-logo">
          <img src="../assets/icon/loginlogo.png" alt="" width="150px" />
        </div>
        <div class="login-nav-gg" @click="HomeView">逛一逛</div>
      </div>

      <div class="welcometext">
        <div class="chinese">欢迎回来！</div>
        <div class="english">Please login to your accounts</div>
      </div>

      <!-- 登录框 -->
      <div class="loginInfo">
        <van-form>
          <van-field
            v-model="userLoginInfo.phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            autocomplete="off"
          />
          <van-field
            v-model="userLoginInfo.password"
            :type="showLoginpassword ? 'text' : 'password' "
            name="密码"
            label="密码"
            autocomplete="off"
            :right-icon="showLoginpassword ? 'eye-o' : 'closed-eye'"
            @click-right-icon="toggleEye('showLoginpassword')"
            placeholder="密码必须为字母开头"
          />
          <div class="forgotpas" @click="forgetpas">忘记密码？</div>
          <div style="margin: 16px" @click="userLoginInfos">
            <van-button round block type="info" native-type="submit"
              >登录</van-button
            >
          </div>
          <div style="margin: 16px" @click="showReInput">
            <van-button round block native-type="submit">注册</van-button>
          </div>
          <div class="kszc" style="margin: 16px" @click="demo1" >
            <van-button round block native-type="submit">快速注册</van-button>
          </div>
        </van-form>
      </div>
      <!-- 验证码 -->
      <div>
        <Vcode :show="isShow" :imgs="rec" @success="onSuccess" />
      </div>
      <!-- 注册框 -->
      <div class="register">
        <van-popup v-model="show" position="bottom">
          <div class="regititle">注册</div>
          <div class="regiInfo">
            <van-form @submit="userRegisterInfo">
              <van-field
                v-model="userReg.phone"
                name="手机号"
                label="手机号"
                placeholder="11位手机号"
                autocomplete="off"
              />
              <van-field
                v-model="userReg.password"
                :type="showRegpassword ? 'text' : 'password'"
                name="密码"
                label="密码"
                autocomplete="off"
                :right-icon="showRegpassword ? 'eye-o' : 'closed-eye'"
                @click-right-icon="toggleEye('showRegpassword')"
                placeholder="密码必须为字母开头"
              />
              <van-field
                v-model="userReg.nickName"
                type="text"
                name="昵称"
                label="昵称"
                placeholder="昵称"
                autocomplete="off"
              />
              <div style="margin: 16px">
                <van-button round block type="info" native-type="submit"
                  >注册</van-button
                >
              </div>
            </van-form>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  name: "login",
  components: {
    Vcode,
  },
  data() {
    return {
      rec: [require("../assets/icon/5.jpg")],
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      // a: require("../assets/icon/闭眼睛.png"),
      isShow: false,
      msg: "",
      show: false,
      //登录需要的信息
      userLoginInfo: {
        phone: "",
        password: "",
      },
      //注册需要的信息
      userReg: {
        phone: "",
        password: "",
        nickName: "",
      },
      //登录密码显示隐藏
      showLoginpassword: false,
      //注册密码显示隐藏
      showRegpassword: false,
    };
  },
  created() {},
  methods: {
    //跳转忘记密码页面
    forgetpas(){
      this.$router.push({name:"Email"})
    },
    //快速注册
    demo1(){
      //手机号 随机
      let rec = "";
      //验证手机号
      let log = /^1[3-9]\d{9}$/;
      for(let i = 0;i < 11; i++){
        let ramdomNum = Math.floor(Math.random() *9);
        rec +=ramdomNum;
      }
      if(!log.test(rec)){
        this.demo1();
        return
      }
      console.log(rec);
      let demoP = "a12345"
      let demoN = "南"
      this.userReg.phone = rec
      this.userReg.password = demoP
      this.userReg.nickName = demoN
      this.userRegisterInfo()
      this.show =false
    },
    //点击切换密码显示隐藏
    toggleEye(key) {
      this[key] = !this[key];
    },
    //用户登录
    userLoginInfos(){
      //显示拼图验证
      if(this.userLoginInfo.phone == '' || this.userLoginInfo.password == ''){
        this.$toast("输入框不能为空")
        return
      }
      //显示拼图验证
      this.isShow = !this.isShow;
    },
    //用户注册
    userRegisterInfo() {
      //验证注册手机号
      let RegPhone = /^1[3-9]\d{9}$/;
      if (!RegPhone.test(this.userReg.phone) || this.userReg.phone == "") {
        this.$toast("手机号格式错误");
        return;
      }
      //验证密码
      let RegPassword = /^[A-Za-z][A-Za-z\d]{5,15}$/;
      if (
        !RegPassword.test(this.userReg.password) ||
        this.userReg.password == ""
      ) {
        this.$toast("密码格式错误");
        return;
      }
      //验证昵称
      let ReNickName = /^[A-Za-z\u4e00-\u9fa5]{1,5}$/;
      if (
        !ReNickName.test(this.userReg.nickName) ||
        this.userReg.nickName == ""
      ) {
        this.$toast("昵称格式错误");
        return;
      }

      //appkey&phone&password&nickName 通过&拼接
      //发起请求前处理函数
      let str = `appkey=${this.appkey}&phone=${this.userReg.phone}&password=${this.userReg.password}&nickName=${this.userReg.nickName}`;
      this.axios({
        method: "post",
        url: "/register",
        data: str,
      }).then((res) => {
        if (res.data.code == 100) {
          this.$toast("注册成功");
          //注册成功隐藏注册框
          this.userLoginInfo.phone = this.userReg.phone;
          this.userLoginInfo.password = this.userReg.password;
          this.show = false;
          //置空
          this.userReg.phone = "";
          this.userReg.password = "";
          this.userReg.nickName = "";
        }
        if (res.data.code == 102) {
          this.$toast(res.data.msg);
          this.userReg.phone = "";
          return;
        }
        console.log(res);
      });
    },
    //拼图验证
    onSuccess() {
      //验证成功之后发起登录请求
      if(this.isShow){
        this.isShow = !this.isShow
        let str = `appkey=${this.appkey}&phone=${this.userLoginInfo.phone}&password=${this.userLoginInfo.password}`;
        this.axios({
          method:"post",
          url:"/login",
          data:str
        }).then((res)=>{
          if(res.data.code == 200){
            this.$toast(res.data.msg)
            this.$cookies.set("TOKEN",res.data.token,"1d")
            setTimeout(()=>{
             this.$router.push({ name: "Home" });
            },1000)
          }
          console.log(res);
        })
      }
    },
    //显示隐藏注册弹出层
    showReInput() {
      this.show = !this.show;
    },
    HomeView() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      setTimeout(() => {
        this.$router.push({ name: "Home" });
        this.$toast.clear();
      }, 3000);
    },
  },
};
</script>

<style lang="less" scoped>
.kszc /deep/ .van-button--default{
  background-color: skyblue;
}
.regiInfo {
  margin-top: 50px;
}
/deep/.van-button--normal {
  margin-top: 50px;
}
/deep/.van-button--info {
  margin-top: 50px;
}
.forgotpas {
  margin-top: 15px;
  margin-left: 300px;
}
.loginInfo {
  margin-top: 40px;
}
.english {
  margin-left: 10px;
  font-size: 14px;
  margin-top: 20px;
  color: #83838b;
}
.chinese {
  margin-left: 10px;
  margin-top: 80px;
  font-weight: bold;
  font-size: 24px;
  color: #646566;
}
.login-nav-gg {
  margin-top: 3px;
  color: blue;
}
.login-nav {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  align-items: center;
  height: 50px;
  font-size: 16px;
}
.regititle {
  font-weight: bold;
  color: #646566;
  margin: 16px;
  font-size: 30px;
}
.login {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}
</style>